<template>
  <div class="login">
    <!-- <video src="/public/asdf.mp4" class="video" autoplay muted></video> -->
    <div class="form">
      <el-form label-width="80px" :rules="rules" :model="formData" ref="formRef">
        <el-form-item>
          <h3 style="flex: 1; text-align: center;">用户登陆</h3>
        </el-form-item>
        <el-form-item label="账户" prop="username">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%;" @click="login">登陆</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" style="width: 100%;">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
import type { FormRules, FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import axios from 'axios';
import { useRouter } from 'vue-router'
import { debounce } from 'lodash'
import { useUserStore } from '@/stores/user';


interface LoginDataState {
  username: string
  password: string
}
const { loginSuccess } = useUserStore()
const router = useRouter()
const formRef = ref<FormInstance>()
const formData = ref<LoginDataState>({
  username: '666666@qq.com',
  password: '987654321'
})

const rules = ref<FormRules<LoginDataState>>({
  "username": [
    { required: true, message: '用户名不可以为空！！！' },
    { pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: '邮箱格式不正确' }
  ],
  "password": [
    { required: true, message: '密码不可以为空！！！' },
    { min: 6, max: 12, message: '密码长度在6-12位' }
  ]
})


const login = debounce(() => {
  // 验证
  formRef.value?.validate().then(async () => {
    // 发送请求
    const resp = await axios.post('/api/login', formData.value)
    // 验证是否登录
    const { code, message, data } = resp.data;
    if (code === 10000) {
      ElMessage({
        type: 'success',
        message: message
      })
      localStorage.setItem('token', data.token)
      // 跳转路由
      router.push('/')
      // 储存信息
      loginSuccess(data)
      // localStorage.setItem('nickname', data.nickname)
      // localStorage.setItem('avator', data.avator)
    } else {
      ElMessage({
        type: 'error',
        message: message
      })
    }
  }).catch(() => {
    ElMessage({
      type: 'error',
      message: '格式不正确， 请检查后再次登陆'
    })
  })
}, 500)

</script>
<style lang="scss" scoped>
.login {
  background-image: url('../../assets/login-back.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
}

.form {
  // 上下
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;

  width: 500px;
  // min-height: 400px;
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
  z-index: 10;
}

.video {
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  position: fixed;
  background-color: #000;
  transform: scale(1.2);
}
</style>
